<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Athenaeum : Create a Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jsp:include page="../../assets/header.jsp" />

</head>
<body>
	<jsp:include page="../../assets/navbar-top.jsp" />
	<div class="page-wrap">
		<div class="container-fluid">
			<div class="row row-wrap">
				<div class="col-md-10 col-md-offset-1">
					<div class="row">
						<ol class="breadcrumb">
							<li><i class="fa fa-home"></i> <a
								href="${pageContext.request.contextPath}">Home</a></li>
							<li><i class="fa fa-cogs"></i> <a
								href="${pageContext.request.contextPath}/settings/organizations">Settings</a></li>
							<li><i class="fa fa-umbrella"></i> <a
								href="${pageContext.request.contextPath}/account/organization/${organizationid}/edit">Organization</a></li>
							<li><i class="fa fa-sitemap"></i> <a
								href="${pageContext.request.contextPath}/account/organization/${organizationid}/department/${departmentid}/edit">Department</a>
							</li>
							<li class="active"><i class="fa fa-suitcase"></i> Project</li>
						</ol>
					</div>
					<div class="row">
						<h1>Create a project</h1>
						<ol class="steps">
							<li class="complete"><i class="fa fa-check fa-2x"></i> <strong
								class="step">Completed</strong> Set up a personal account</li>
							<li class="complete"><i class="fa fa-check fa-2x"></i> <strong
								class="step">Completed</strong> Set up the organization</li>
							<li class="complete"><i class="fa fa-check fa-2x"></i> <strong
								class="step">Completed</strong> Set up the departments</li>
							<li class="current"><i class="fa fa-suitcase fa-2x"></i> <strong
								class="step">Step 4:</strong> Set up a project</li>
							<li><i class="fa fa-group fa-2x"></i> <strong class="step">Step
									5:</strong> Invite team members</li>
						</ol>
					</div>
					<div class="row row-wrap">
						<h4>Set up a project</h4>
						<div class="col-md-8">
							<form:form modelAttribute="project"
								action="${pageContext.request.contextPath}/account/organization/${organizationid}/department/${departmentid}/project/save"
								method="post" role="form">
								<form:hidden path="id" />
								<div class="form-group">
									<label for="title">Title</label>
									<form:input type="text" class="form-control" id="title"
										path="title" placeholder="Project Name" />
								</div>
								<div class="form-group">
									<label for="title">Key</label>
									<form:input type="text" class="form-control" id="abbr"
										path="abbr" placeholder="Project Key" />
								</div>
								<div class="form-group">
									<label for="description">Description</label>
									<form:input type="text" class="form-control" id="description"
										path="description"
										placeholder="Short description of this project" />
								</div>
								<div class="form-group">
									<label for="lead">Project Lead</label>
									<form:select class="selectpicker show-tick" path="lead"
										id="lead" items="${allusers}" data-live-search="true"
										data-width="100%">
									</form:select>
								</div>
								<div class="form-group">
									<label for="category">Category</label>
									<form:input type="text" class="form-control" id="category"
										path="category" placeholder="Project Category" />
								</div>
								<c:if test="${empty project.id}">
									<button type="submit" class="btn btn-primary">Create
										project</button>
								</c:if>
								<c:if test="${not empty project.id}">
									<button type="submit" class="btn btn-primary">Update
										project</button> &nbsp; &nbsp; <a
										href="${pageContext.request.contextPath}/account/organization/${organizationid}/department/${departmentid}/project/${project.id}/user/index"
										class="btn btn-primary pull-right">View team</a>
								</c:if>
							</form:form>
						</div>
						<div class="col-md-4"></div>
					</div>
					<c:if test="${not empty projects}">
						<div class="row row-wrap">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">Projects</h3>
								</div>
								<div class="panel-body">
									<table class="table table-striped" id="departments"
										style="width: '100%'">
										<thead>
											<tr>
												<th>Title</th>
												<th>Description</th>
												<th>Project Lead</th>
												<th>Category</th>
												<th>Actions</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach var="project" items="${projects}">
												<tr>
													<td><a
														href="${pageContext.request.contextPath}/account/organization/${organizationid}/department/${departmentid}/project/${project.id}/edit">${project.title}</a></td>
													<td>${project.description}</td>
													<td>${project.lead}</td>
													<td>${project.category}</td>
													<td><a
														href="${pageContext.request.contextPath}/account/organization/${organizationid}/department/${departmentid}/project/${project.id}/user/index">View
															Team</a> | <a
														href="${pageContext.request.contextPath}/account/organization/${organizationid}/department/${departmentid}/project/${project.id}/delete">Delete</a></td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</c:if>
					<div class="row row-wrap"></div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="../../assets/footer.jsp" />
	<script type="text/javascript">
		$(document).ready(function() {
			$('#departments').dataTable({
				"bLengthChange" : false,
			});

			$('.selectpicker').selectpicker();
		});
	</script>
</body>
</html>

